import React, { useEffect, useState } from "react";
import { Button, Popup } from "mooli-mobile";
import Camera from "../dist";

let camera: Camera;
const Result = () => {
  const [text, setText] = useState("暂停");
  const [disabled, setDisabled] = useState(false);
  const [visible, setVisible] = useState(false);

  useEffect(() => {
    if (document.getElementById("record")) {
      camera = new Camera(document.getElementById("record") as HTMLElement);
    }
  }, []);

  const start = () => {
    if (disabled) return;
    camera.start();
    setDisabled(true);
  };

  const stop = () => {
    if (!disabled) return;
    const state = camera.getMediaRecorderState();
    if (state === "recording") {
      setText("继续");
      camera.pause();
    }
    if (state === "paused") {
      setText("暂停");
      camera.resume();
    }
  };
  const play = () => {
    if (!disabled) return;
    setVisible(true);
  };
  const onOpened = () => {
    camera.stop();
    const blob = camera.getBlobData();
    const video = document.getElementById("video") as HTMLVideoElement;
    if (blob && video) {
      video.src = URL.createObjectURL(blob);
      video.play();
    }
  };
  const onClose = () => {
    setVisible(false);
    setDisabled(false);
  };
  const download = () => {
    if (!disabled) return;
    setDisabled(false);
    camera.stop();
    const blob = camera.getBlobData();
    if (blob) {
      const url = URL.createObjectURL(blob);
      const a = document.createElement("a");
      const fileName = "recordedVideo";
      a.href = url;
      a.download = fileName;
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
      URL.revokeObjectURL(url);
    }
  };

  return (
    <div className="container">
      <h3 className="header">
        {/* biome-ignore lint/a11y/useKeyWithClickEvents: <explanation> */}
        <span className="back" onClick={() => window.history.back()}>
          {/* biome-ignore lint/a11y/noSvgWithoutTitle: <explanation> */}
          <svg
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            {/* biome-ignore lint/style/useSelfClosingElements: <explanation> */}
            <rect
              x="15"
              y="3.51472"
              width="2"
              height="12"
              rx="1"
              transform="rotate(45 15 3.51472)"
              fill="currentColor"
            ></rect>
            {/* biome-ignore lint/style/useSelfClosingElements: <explanation> */}
            <rect
              x="16.4142"
              y="19.0711"
              width="2"
              height="12"
              rx="1"
              transform="rotate(135 16.4142 19.0711)"
              fill="currentColor"
            ></rect>
          </svg>
        </span>{" "}
        录制视频
      </h3>
      <div id="record" />
      <div className="btns">
        <Button disabled={disabled} onClick={start} type="primary">
          开始
        </Button>
        <Button disabled={!disabled} onClick={stop} type="info">
          {text}
        </Button>
        <Button disabled={!disabled} onClick={play} type="warning">
          播放
        </Button>
        <Button disabled={!disabled} onClick={download} type="danger">
          下载
        </Button>
      </div>
      <Popup
        className="play-popup"
        closeable={true}
        visible={visible}
        onOpened={onOpened}
        onClickMask={onClose}
      >
        <div className="plays">
          <div className="plays-video">
            {/* biome-ignore lint/a11y/useMediaCaption: <explanation> */}
            <video
              id="video"
              poster="R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs="
              playsInline
              autoPlay
              muted
            />
          </div>
          {/* biome-ignore lint/a11y/useKeyWithClickEvents: <explanation> */}
          <span className="close" onClick={onClose}>
            {/* biome-ignore lint/a11y/noSvgWithoutTitle: <explanation> */}
            <svg
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="1452"
              width="200"
              height="200"
            >
              {/* biome-ignore lint/style/useSelfClosingElements: <explanation> */}
              <path
                d="M937.281581 799.254764 937.281581 799.254764 937.281581 799.254764 937.281581 799.254764zM1002.320395 510.91602c0-270.99506-220.409315-491.404375-491.404375-491.404375-270.99506 0-491.404375 220.409315-491.404375 491.404375 0 270.99506 220.409315 491.404375 491.404375 491.404375C781.91108 1002.320395 1002.320395 781.91108 1002.320395 510.91602M510.91602 931.500353c-231.971771 0-421.306987-188.612562-421.306987-421.306987 0-231.971771 188.612562-421.306987 421.306987-421.306987 231.971771 0 421.306987 188.612562 421.306987 421.306987C931.500353 742.887791 742.887791 931.500353 510.91602 931.500353M712.536344 664.841214l-151.757234-152.479887 151.757234-150.311927c13.730416-13.730416 13.730416-36.132675 0-49.863091-13.730416-13.730416-36.132675-13.730416-49.863091 0L510.91602 462.498236 360.604093 312.186309c-13.730416-13.730416-36.132675-13.730416-49.863091 0-13.730416 13.730416-13.730416 36.132675 0 49.863091l149.589273 150.311927L310.018349 661.227946c-13.730416 13.730416-13.730416 36.132675 0 49.863091 7.226535 7.226535 15.898377 10.117149 24.570219 10.117149 8.671842 0 18.066337-3.613267 24.570219-10.117149l151.03458-149.589273 152.479887 152.479887c6.503881 6.503881 15.898377 10.117149 24.570219 10.117149 8.671842 0 18.066337-3.613267 24.570219-10.117149C725.544107 700.973888 725.544107 678.57163 712.536344 664.841214"
                fill="#ffffff"
                p-id="1453"
              ></path>
            </svg>
          </span>
        </div>
      </Popup>
    </div>
  );
};

export default Result;
